<template>
  <div>
    <!-- 面包导航 -->
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
      <el-breadcrumb-item>物资入库</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片列表部分 -->
    <el-card>
      <!-- 搜索部分 -->
      <el-form :inline="true" :model="queryMap" class="demo-form-inline">
        <!-- 类型 -->
        <el-form-item label="类型">
          <el-select v-model="queryMap.type" clearable placeholder="请选择入库类型">
            <el-option label="捐赠" value="1"></el-option>
            <el-option label="下拨" value="2"></el-option>
            <el-option label="采购" value="3"></el-option>
            <el-option label="借用" value="4"></el-option>
          </el-select>
        </el-form-item>
        <!-- 单号 -->
        <el-form-item label="单号">
          <el-input
            v-model="queryMap.inNum"
            placeholder="请输入入库单查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryMap.status" placeholder="请选择">
            <el-option label="已入库" :value="0"></el-option>
            <el-option label="回收站" :value="1"></el-option>
            <el-option label="待审核" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- 日期选择 -->
        <el-form-item>
          <div class="block">
            <el-date-picker
              v-model="queryMap.createTime  "
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-button type="warning" @click="reset" icon="el-icon-refresh"
              >重置</el-button
            >
            <el-button type="success" @click="searchUser" icon="el-icon-plus"
              >入库</el-button
            >
            <el-button
              @click="downExcel"
              v-hasPermission="'user:export'"
              icon="el-icon-download"
              >导出</el-button
            >
          </el-row>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="#" width="50"> </el-table-column>
        <el-table-column
          prop="inNum"
          label="入库单号"
          width="150"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="type" label="物资类型" width="120">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  <el-tag v-if="scope.row.type==1" type="success" size="medium">捐赠</el-tag>
                  <el-tag v-if="scope.row.type==2" size="medium">下拨</el-tag>
                  <el-tag v-if="scope.row.type==3" size="medium" type="danger">采购</el-tag>
                  <el-tag v-if="scope.row.type==4" size="medium" type="warning">借用</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="productNumber" label="数量" width="120" sortable>
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="120">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="200">
          <template slot-scope="scope">
              <el-button type="primary" v-if="scope.row.status==0" plain>已入库</el-button>
              <el-button type="danger" v-if="scope.row.status==1" plain>回收站</el-button>
              <el-button type="warning" v-if="scope.row.status==2" plain>待审核</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作员" width="120">
        </el-table-column>
        <el-table-column prop="supplierName" label="物资提供方" width="120">
        </el-table-column>
        <el-table-column prop="createTime" label="入库时间" width="120" sortable>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <!-- 明细 -->
            <el-button @click="detail(scope.row.id)" type="text" size="small" icon="el-icon-view"
              >明细</el-button
            >
            <!-- 给操作员使用的按钮 -->
            <span v-if="scope.row.status===0">
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @confirm="rm(scope.row.id)"
            >
              <el-button type="text" slot="reference" size="mini"  icon="el-icon-s-operation">回收站</el-button>
            </el-popconfirm>
            </span>
            <span v-if="scope.row.status===1">
                        <el-popconfirm
                        @confirm="back(scope.row.id)"
                        confirm-button-text='好的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        icon-color="red"
                        title="这一段内容确定恢复数据吗？"
                      >
                        <el-button  type="text" slot="reference" size="mini" icon="el-icon-s-operation">还原</el-button>
                      </el-popconfirm>
                       <el-popconfirm
                          @confirm="del(scope.row.id)"
                          confirm-button-text='好的'
                          cancel-button-text='不用了'
                          icon="el-icon-info"
                          icon-color="red"
                          title="这一段内容确定删除吗？"
                        >
                          <el-button  type="text" slot="reference" size="mini" icon="el-icon-delete">删除</el-button>
                        </el-popconfirm>
                  </span>
                  <!-- 给审核员使用的按钮 -->
                  <span v-if="scope.row.status===2">
                      <el-popconfirm
                    @confirm="publish(scope.row.id)"
                    confirm-button-text='好的'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    icon-color="red"
                    title="审核通过后库存将更新,是否通过？"
                  >
                    <el-button  type="text" slot="reference" size="mini" icon="el-icon-refresh">通过</el-button>
                  </el-popconfirm> <el-popconfirm
                    @confirm="del(scope.row.id)"
                    confirm-button-text='好的'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    icon-color="red"
                    title="这一段内容确定删除吗？"
                  >
                    <el-button  type="text" slot="reference" size="mini" icon="el-icon-delete">删除</el-button>
                  </el-popconfirm>
                  </span>
          </template>
        </el-table-column>
      </el-table>
       <!-- 明细 -->
     <el-dialog title="入库明细" :visible.sync="dialogTableVisible" width="800px">
         <el-card>
           
           <el-row>
             <el-form >
             <el-col :span="6">
               <el-form-item label="省市区" style="font-size: 11px; color: #303030">
                 <el-tag>{{supplier.address}}</el-tag>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="具体位置" style="font-size: 11px; color: #303030">
                 <el-tag>{{supplier.name}}</el-tag>
               </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="联系人" style="font-size: 11px; color: #303030">
                  <el-tag>{{supplier.contact}}</el-tag>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="电话" style="font-size: 11px; color: #303030">
                  <el-tag>{{supplier.phone}}</el-tag>
                </el-form-item>
             </el-col>
             </el-form>
           </el-row>
         </el-card>
         <!-- 步骤条 -->
                 <el-steps :active="3" finish-status="success" simple style="margin-top: 20px">
            <el-step title="提交入库单" ></el-step>
            <el-step title="审核入库单" ></el-step>
            <el-step title="进入库存" ></el-step>
          </el-steps>
         <el-table :data="itemVos">
            <el-table-column property="name" label="名称" width="150"></el-table-column>
            <el-table-column property="pnum" label="商品编号" width="200"></el-table-column>
            <el-table-column property="model" label="规格"></el-table-column>
            <el-table-column property="imageUrl" label="图片">
              <template slot-scope="scope">
                <img
                  :src="'https://www.zykhome.club/' + scope.row.imageUrl"
                  alt
                  style="width: 30px; height: 30px"
                />
              </template>
            </el-table-column>
            <el-table-column property="count" label="数量"></el-table-column>
            <el-table-column property="unit" label="单位"></el-table-column>
        </el-table>
        <el-pagination
              style="margin-top: 20px"
              background
              @current-change="handleDetailSizeChange"
              :current-page="this.pageNum"
              :page-size="3"
              layout="prev, pager, next,total"
              :total="this.detailTotal"
            >
            </el-pagination>
      </el-dialog>
      <!-- 分页部分 -->
      <div class="block">
        <el-pagination
          style="margin-top:10px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.queryMap.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="this.queryMap.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      //表格数据
      tableData: [],
      // 日期选择
      pickerOptions: {
        shortcuts: [
          {
            text: "今天（此刻）",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dialogTableVisible:false,
      value: "",
      total:0,
      detailTotal: 0,
      detailId: undefined,
      pageNum: 1,
      supplier:[],
      itemVos:[],
      queryMap:{pageSize:10,pageNum:1,status:0},    
      centerDialogVisible: false,
    };
  },
  // mounted(){
  //   this.getTableList();
  // },
  created(){
    this.getTableList();
  },
  methods: {
    // 获取表数据  
    async getTableList(){
      const {data: res}=await this.$http.get("inStock/findInStockList",{params:this.queryMap});
      console.log(res);
      if(res.code!==200){
        return this.$message.console.error("获取失败");
      }else{
        this.tableData=res.data.rows;
        this.total=res.data.total;
      }
    },
    //入库
    searchUser(){
      this.$router.push("/add-stocks")
    },
    //导出  (?==?没接口?==?)
    downExcel(){
      // var $this = this;
      // const res = axios
      //   .request({
      //     url: "/inStock/excel",
      //     method: "post",
      //     responseType: "blob",
      //   })
      //   .then((res) => {
      //     if (res.headers["content-type"] === "application/json") {
      //       return $this.$message.error(
      //         "Subject does not have permission [putin:export]"
      //       );
      //     }
      //     const data = res.data;
      //     let url = window.URL.createObjectURL(data); // 将二进制文件转化为可访问的url
      //     var a = document.createElement("a");
      //     document.body.appendChild(a);
      //     a.href = url;
      //     a.download = "入库列表.xls";
      //     a.click();
      //     window.URL.revokeObjectURL(url);
      //   });
    },
    //移入回收站
    async rm(id){
      const {data:res}=await this.$http.put("inStock/remove/"+id)
      if(res.code===200){
        this.$message.success("移入回收站成功");
        this.getTableList();
      }else{
        return this.$message.error("移入回收站失败"+res.msg);
      }
    },
    //还原
    async back(id){
      const {data:res}=await this.$http.put("inStock/back/"+id)
      if(res.code===200){
        this.$message.success("还原成功");
        this.getTableList();
      }else{
        return this.$message.error("还原失败"+res.msg);
      }
    },
    //删除
    async del(id){
      const {data:res}=await this.$http.get("inStock/delete/"+id)
      if(res.code===200){
        this.$message.success("删除成功");
        this.getTableList();
      }else{
        return this.$message.error("删除失败"+res.msg);
      }
    },
    //明细
    async detail(id) {
      this.detailId=id;
      this.dialogTableVisible=!this.dialogTableVisible
      const {data:res}=await this.$http.get("inStock/detail/"+this.detailId+"?pageNum"+this.pageNum)
      console.log(res);
      this.supplier=res.data.supplierVO
      this.itemVos=res.data.itemVOS
      this.detailTotal=res.data.total
    },
    //通过
    async publish(id){
      const {data:res}=await this.$http.put("inStock/publish/"+id)
      console.log(res);
      if(res.code===200){
        this.$message.success("入库审核成功")
        this.getTableList()
      }else{
        return this.$message.error("入库审核失败"+res.msg)
      }
    },
   // 改变页码
    handleSizeChange(newSize) {
      this.queryMap.pageSize=newSize;
      this.getTableList();
    },
     // 改变明细页码
    handleDetailSizeChange(newSize) {
      this.pageNum = newSize;
      this.detail(this.detailId);
    },
    // 翻页
    handleCurrentChange(current) {
      this.queryMap.pageNum=current;
      this.getTableList();
    },
    /**
     * 搜索
     */
    search() {
      this.queryMap.pageNum = 1;
      this.getTableList();
    },
    //重置
    reset(){
      this.queryMap={pageSize:10,pageNum:1,status:0}
      this.getTableList();
    },
  },
  components: {
    // Detail,
  },
};
</script>

<style>

</style>